<template>
  <div class="box4" ref="map">我是地图组件</div>
</template>

<script lang="ts"  setup>
import { ref, onMounted } from "vue";
import {} from "vue-router";
import * as echarts from "echarts";
// 引入中国地图Json数据
import chinaJson from "./china.json";
//获取DOM元素
let map = ref();
//注册中国地图
echarts.registerMap("china", chinaJson as any);
onMounted(() => {
  let mychart = echarts.init(map.value);
  const pointOption = [
    { name: "南京", value: [118.796, 32.0583] },
    { name: "西安", value: [108.94, 34.341101] },
    { name: "上海", value: [121.474, 31.230001] },
    { name: "重庆", value: [106.552003, 29.562696] },
    { name: "西宁", value: [101.778, 36.6172] },
    { name: "北京", value: [116.407001, 39.9046] },
    { name: "天津", value: [117.201509, 39.085318] },
  ];
  const lineOption = [];
  const lastPoint = {
    name: "正定县",
    value: [114.57043, 38.14699],
    lineStyle: {
      color: "#FF6C66",
    },
  };
  const colorList = [
    "#D88BFF",
    "#5abead",
    "#66FFFF",
    "#48D5FF",
    "#FFE73D",
    "#66FFFF",
  ];

  pointOption.map((item, index) => {
    item.lineStyle = { color: colorList[index % colorList.length] };
    item.coords = [lastPoint.value, item.value];
    lineOption.push(item);
    pointOption.push(lastPoint);
  });
  mychart.setOption({
    // backgroundColor: "#101c5e",
    tooltip: { show: true },
    geo: [
      {
        map: "china",
        // zoom: 1.25,
        z: 70,
        top: "100px",
        selected: true,
        label: {
          show: true,
          padding: 4,
          color: "#ddd",
          fontFamily: "pf-zh",
        },
        itemStyle: {
          areaColor: "#0c4c91",
          borderColor: "rgba(147,234,245,.5)",
          borderWidth: 1,
        },
        emphasis: {
          disabled: true,
        },
        regions: [
          {
            name: "南海诸岛",
            emphasis: {
              disabled: true,
            },
            itemStyle: {
              borderWidth: 1,
            },
          },
        ],
      },
        // {
        //   type: "map",
        //   map: "china",
        //   zoom: 1.252,
        //   z: 60,
        //   top: "100px",
        //   selected: false,
        //   // left: '15.8%',
        //   itemStyle: {
        //     areaColor: "#177db7",
        //   },
        //   emphasis: {
        //     disabled: true,
        //   },
        //   regions: [
        //     {
        //       name: "南海诸岛",
        //       emphasis: {
        //         disabled: true,
        //       },
        //       itemStyle: {
        //         areaColor: "transparent",
        //         borderWidth: 0,
        //       },
        //     },
        //   ],
        // },
    ],
    series: [
      // 水波圈效果
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        showEffectOn: "render",
        z: 90,
        rippleEffect: {
          period: 12,
          scale: 4,
          brushType: "fill",
        },
        label: {
          formatter: "{b}",
          position: "top",
          offset: [0, -10],
          color: "#1DE9B6",
          show: false,
          fontSize: 12,
        },
        itemStyle: {
          color: (value) => {
            // console.log(value, 'lll')
            return value.data.lineStyle.color || "#5abead";
          },
          shadowBlur: 10,
          shadowColor: "#333",
        },
        symbolSize: 8,
        data: pointOption,
      },
      // 流转线效果
      {
        type: "lines",
        z: 100,
        effect: {
          show: true,
          period: 8, // 箭头指向速度，值越小速度越快
          trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", // 箭头图标
          symbolSize: 5, // 图标大小
        },
        lineStyle: {
          color: "#1DE9B6",
          width: 1, // 线条宽度
          opacity: 0.1, // 尾迹线条透明度
          curveness: 0.3, // 尾迹线条曲直度
        },
        data: lineOption,
      },
    ],
  });
});
</script>

<style lang="scss" scoped>
</style>